<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework</title>
    <link rel="stylesheet" href="css/common.css" />
</head>
<body>
    <div class="box" >
        <h1 style="text-align: center;">主机列表</h1>
        <div class="top" >
                <input type="button" value="全选" onclick="CheckAll()"/>
                <input type="button" value="反选" onclick="CheckReverse()"/>
                <input type="button" value="取消" onclick="Cancel()"/>
                <input type="button" value="添加"/>
                <input type="button" value="删除"/>
                <input type="button" value="进入编辑模式" onclick="EditMode(this)" id="edit"/>
                <input type="button" value="保存"/>
                <input type="button" value="刷新"/>
        </div>
        <div class="body">
            <table>
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>主机名</th>
                        <th>IP</th>
                        <th>端口</th>
                    </tr>
                </thead>
                <tbody id="tb">
                    <tr id="line1">
                        <td><input type="checkbox" onclick="select_one()" /></td>
                        <td class="host">host1</td>
                        <td class="ip">192.168.1.1</td>
                        <td class="port">22</td>
                    </tr>
                    <tr id="line2">
                        <td><input type="checkbox" onclick="select_one()" /></td>
                        <td class="host">host2</td>
                        <td class="ip">192.168.1.2</td>
                        <td class="port">2222</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        /*全选，
        如果当前模式为编辑模式，就执行编辑函数，进入可编辑状态*/
        function CheckAll(){
            $("#tb").find(":checkbox").prop("checked",true);
            if($("#edit").hasClass('orange')){
                edit();
            }
        }
        /*反选，
        如果当前模式为编辑模式，选中的行就执行编辑函数，进入可编辑状态
        未被选中的行，将不可编辑*/
        function CheckReverse(){
            $("#tb").find(":checkbox").each(function(){
                if($(this).prop("checked")){
                    $(this).prop("checked",false);
                    if($("#edit").hasClass('orange')){
                        edit_cancel();
                    }
                }else{
                    $(this).prop("checked",true);
                    if($("#edit").hasClass('orange')){
                        edit();
                    }
                }
            });
        }
        /*取消，
        如果当前模式为编辑模式，选中的行都将不可编辑*/
        function Cancel(){
            $("#tb").find(":checkbox").prop("checked",false);
            if($("#edit").hasClass('orange')){
                edit_cancel();
            }
        }
        /*编辑模式，《进入编辑模式》按钮属性，
        进入和退出模式之间的转换*/
        function EditMode(ths){
            edit_val=$(ths).attr("value");
            if(edit_val=='进入编辑模式'){
                $(ths).attr("value","退出编辑模式");
                $(ths).addClass("orange");
                edit();
            }else{
                $(ths).attr("value","进入编辑模式");
                $(ths).removeClass("orange");
                edit_cancel();
            }
        }
        /*编辑动作，
        查找checkbox选中的行，如果能获取到内容，而不是input标签，那么改成可编辑状态，
        */
        function edit(){
            $("#tb").find(":checkbox").each(function(){
                if($(this).prop("checked")){
                    var ele=$(this);
                    var list=[".host",".ip",".port"];
                    $.each(list,function(i){
                        var content = ele.parent().siblings(list[i]).text();
                        if(content){
                            var new_content = "<input type='text' value='"+content+"'/>";
                            ele.parent().siblings(list[i]).html(new_content);
                        }
                    });
                }
            });
        }
        /*取消编辑动作，
        查找表格中type为text的input标签，
        将父标签的内容取消input标签，设置原有内容*/
        function edit_cancel(){
            $("#tb").find(":text").each(function(){
                var content = $(this).attr("value");
                $(this).parent().html(content);
            });
        }
        function select_one(){
            edit();
            edit_cancel();
        }
    </script>
</body>
</html>